<template>
  <div class="center_div">
    <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 100%">
      <el-tab-pane label="预定的会议" name="预定的会议">
        <el-table :data="reserveMeeting" v-loading="tableLoading" element-loading-text="Loading">
          <el-table-column prop="meetingname" label="会议名称" min-width="90"></el-table-column>
          <el-table-column prop="roomname" label="会议室名称" min-width="90"></el-table-column>
          <el-table-column prop="starttime" label="会议开始时间" min-width="90"></el-table-column>
          <el-table-column prop="endtime" label="会议结束时间" min-width="120"></el-table-column>
          <el-table-column prop="reservationtime" label="会议预定时间" min-width="120"></el-table-column>
          <el-table-column prop="description" label="申请理由" min-width="120" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="操作" min-width="120" align="center">
            <template slot-scope="scope">
              <el-button type="success" @click="cancelMyMeetingClick(scope.row)">取消</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="取消的会议" name="取消的会议">
        <el-table :data="cancelMeeting"  v-loading="tableLoading" element-loading-text="Loading">
          <el-table-column prop="meetingname" label="会议名称" min-width="90"></el-table-column>
          <el-table-column prop="roomname" label="会议室名称" min-width="90"></el-table-column>
          <el-table-column prop="starttime" label="会议开始时间" min-width="90"></el-table-column>
          <el-table-column prop="endtime" label="会议结束时间" min-width="120"></el-table-column>
          <el-table-column prop="canceledtime" label="会议取消时间" min-width="120"></el-table-column>
          <el-table-column prop="description" label="取消理由" min-width="120" :show-overflow-tooltip="true"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="未审批的预定会议" name="未审批的预定会议">
        <el-table :data="reserveApplyMeeting"  v-loading="tableLoading" element-loading-text="Loading">
          <el-table-column prop="meetingname" label="会议名称" min-width="90"></el-table-column>
          <el-table-column prop="roomname" label="会议室名称" min-width="90"></el-table-column>
          <el-table-column prop="starttime" label="会议开始时间" min-width="90"></el-table-column>
          <el-table-column prop="endtime" label="会议结束时间" min-width="120"></el-table-column>
          <el-table-column prop="reservationtime" label="会议预定时间" min-width="120"></el-table-column>
          <el-table-column prop="description" label="申请理由" min-width="120" :show-overflow-tooltip="true"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="未审批的取消会议" name="未审批的取消会议">
        <el-table :data="cancelApplyMeeting"  v-loading="tableLoading" element-loading-text="Loading">
          <el-table-column prop="meetingname" label="会议名称" min-width="90"></el-table-column>
          <el-table-column prop="roomname" label="会议室名称" min-width="90"></el-table-column>
          <el-table-column prop="starttime" label="会议开始时间" min-width="90"></el-table-column>
          <el-table-column prop="endtime" label="会议结束时间" min-width="120"></el-table-column>
          <el-table-column prop="canceledtime" label="会议取消时间" min-width="120"></el-table-column>
          <el-table-column prop="description" label="取消理由" min-width="120" :show-overflow-tooltip="true"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
            title="请输入取消原因"
            :visible.sync="dialogVisible"
            width="30%">
      <el-form ref="form" :model="cancelMeet" label-width="100px" style="margin-top:50px;">
        <el-form-item label="" prop="description">
          <el-input type="textarea" placeholder="请填写取消原因" v-model="cancelMeet.description" style="width: 80%;"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="cancelMyMeeting()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: '预定的会议',
      reserveMeeting: [
        {meetingname: '测试1',roomname: '专用会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
        {meetingname: '测试2',roomname: '公共会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
        {meetingname: '测试3',roomname: '专用会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
        {meetingname: '测试4',roomname: '公共会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
        {meetingname: '测试5',roomname: '专用会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
        {meetingname: '测试6',roomname: '公共会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'}
      ],
      cancelMeeting: [
        {meetingname: '测试1',roomname: '专用会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', canceledtime: '2020-01-01 11:11:11', description: '不用了，垃圾会议室'},
        {meetingname: '测试2',roomname: '公共会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', canceledtime: '2020-01-01 11:11:11', description: '不用了，垃圾会议室'},
        {meetingname: '测试3',roomname: '专用会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', canceledtime: '2020-01-01 11:11:11', description: '不用了，垃圾会议室'},
        {meetingname: '测试4',roomname: '公共会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', canceledtime: '2020-01-01 11:11:11', description: '不用了，垃圾会议室'},
        {meetingname: '测试5',roomname: '专用会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', canceledtime: '2020-01-01 11:11:11', description: '不用了，垃圾会议室'},
        {meetingname: '测试6',roomname: '公共会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', canceledtime: '2020-01-01 11:11:11', description: '不用了，垃圾会议室'}
      ],
      reserveApplyMeeting: [
        {meetingname: '测试1',roomname: '专用会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
        {meetingname: '测试2',roomname: '公共会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
        {meetingname: '测试3',roomname: '专用会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
        {meetingname: '测试4',roomname: '公共会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
        {meetingname: '测试5',roomname: '专用会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
        {meetingname: '测试6',roomname: '公共会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'}
      ],
      cancelApplyMeeting: [
        {meetingname: '测试1',roomname: '专用会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', canceledtime: '2020-01-01 11:11:11', description: '不用了，垃圾会议室'},
        {meetingname: '测试2',roomname: '公共会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', canceledtime: '2020-01-01 11:11:11', description: '不用了，垃圾会议室'},
        {meetingname: '测试3',roomname: '专用会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', canceledtime: '2020-01-01 11:11:11', description: '不用了，垃圾会议室'},
        {meetingname: '测试4',roomname: '公共会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', canceledtime: '2020-01-01 11:11:11', description: '不用了，垃圾会议室'},
        {meetingname: '测试5',roomname: '专用会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', canceledtime: '2020-01-01 11:11:11', description: '不用了，垃圾会议室'},
        {meetingname: '测试6',roomname: '公共会议室',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', canceledtime: '2020-01-01 11:11:11', description: '不用了，垃圾会议室'}
      ],
      dialogVisible: false,
      cancelMeet: {},
      tableLoading: false
    }
  },
  created() {
    this.fetchMeeting()
  },
  methods: {
    async fetchMeeting(){
        this.tableLoading = true
        // let times = ['starttime','endtime','canceledtime','reservationtime']
        let meeting = ['reserveMeeting','cancelMeeting','reserveApplyMeeting','cancelApplyMeeting']
        let {code ,data ,msg} = await this.$post('/mybookings')
        if(code === 200) {
            this.reserveMeeting = data.mymeeting
            this.cancelMeeting = data.cancel
            this.reserveApplyMeeting = data.tiral
            this.cancelApplyMeeting = data.tiralcacel

            this.$formatDateForObjectInArray(this,meeting)
        }else {
            this.$message.error(msg)
        }
      this.tableLoading = false
    },
    handleClick(key){
      console.log(key)
    },
    cancelMyMeetingClick(row) {
      this.dialogVisible = true
      this.cancelMeet = row
      this.cancelMeet.description = ''
    },
    async cancelMyMeeting() {
      let {code ,data ,msg} = await this.$post('/cancelmeeting',{
        data: {description: this.cancelMeet.description,id: this.cancelMeet.meetingid}
      })
      if(code === 200) {
        console.log(data)
        this.$message({
          message: '成功提交取消文件申请',
          type: 'success'
        })
        this.fetchMeeting()
        this.dialogVisible = false
      }else {
        this.$message.error(msg)
      }
    }
  }

}
</script>

<style>
  .center_div{
    width: 60%;
    margin:0 auto;
    margin-bottom: 50px;
  }
</style>